import { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Table, Tag, Space } from 'antd';
import { history } from 'umi';
const { Column, ColumnGroup } = Table;

function EmployeeList({ employee, dispatch }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    dispatch({
      type: 'employee/getAll',
    });
  }, []);

  useEffect(() => {
    setData(employee);
  }, [employee]);

  return (
    <div>
      <Table dataSource={data}>
        <ColumnGroup title="Name">
          <Column title="First Name" dataIndex="firstName" key="firstName" />
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
        </ColumnGroup>
        <Column title="Age" dataIndex="age" key="age" />
        <Column title="Address" dataIndex="address" key="address" />

        <Column
          title="Action"
          key="action"
          render={(text, record) => (
            <Space size="middle">
              <a
                onClick={() => {
                  history.push('/employee/' + text.key);
                }}
              >
                add
              </a>
              <a
                onClick={() => {
                  dispatch({
                    type: 'employee/deleteEmployee',
                    payload: {
                      id: text.key,
                    },
                  }).then((res) => {
                    setData(res);
                  });
                }}
              >
                Delete
              </a>
            </Space>
          )}
        />
      </Table>
      ,
      {/* <h1>Employee List Page</h1>
      <ul>
        {employee.map((e) => (
          <li key={e.id}>
            {e.name}{' '}
            <button
              onClick={() =>
                dispatch({
                  type: 'employee/deleteEmployee',
                  payload: {
                    id: e.id,
                  },
                })
              }
            >
              删除
            </button>
          </li>
        ))}
      </ul> */}
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(EmployeeList);
